import { Popconfirm, List, message } from "antd";
import { useEffect } from "react";
import { useModel } from "umi";

import useAllMembers from "../../hooks/member/useAllMembers";
import useStaffChangeMember from "../../hooks/staff/useStaffChangeMember";

const ChangeMemberOfStaff = ({ staff, reloadData }) => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const { loading: memberLoading, members, loadMembers } = useAllMembers();
    const { loading, staffChangeMember } = useStaffChangeMember();

    useEffect(() => {
        loadMembers(false);
    }, []);

    return (
        <div style={{ padding: "10px 0" }}>
            <List
                loading={memberLoading}
                header={"成员列表"}
                bordered
                size="small"
                dataSource={members}
                renderItem={(item) => {
                    let actions = [];
                    actions.push(
                        <Popconfirm
                            title="确定要绑定当前成员吗?"
                            placement="topRight"
                            okButtonProps={{ loading }}
                            onConfirm={() =>
                                staffChangeMember(staff, item, (res) => {
                                    if (res) {
                                        message.success("成功绑定成员信息");
                                        reloadData();
                                        onCloseGlobalModal();
                                    }
                                })
                            }
                        >
                            <a>绑定</a>
                        </Popconfirm>
                    );
                    return <List.Item actions={actions}>{item.omName}</List.Item>;
                }}
            />
        </div>
    );
};

export default ChangeMemberOfStaff;
